import { useMemo } from "react";
import { Appear, Table, Paragraph } from "arwes";

const History = props => {
    const tableBody = useMemo(() => {
        return props.launches?.filter((launch) => !launch.upcoming)
            .map((launch) => {
                return <tr key={String(launch.flightNumber)}>
                    <td>
            <span style={
                { color: launch.success ? "greenyellow" : "red" }
            }>█</span>
                    </td>
                    <td>{launch.flightNumber}</td>
                    <td>{new Date(launch.launchDate).toDateString()}</td>
                    <td>{launch.mission}</td>
                    <td>{launch.rocket}</td>
                    <td>{launch.customers?.join(", ")}</td>
                </tr>;
            });
    }, [props.launches]);

    return <article id="history">
        <Appear animate show={props.entered}>
            <Paragraph>History of mission launches including SpaceX launches starting from the year 2006.</Paragraph>
            <Table animate>
                <table style={{ tableLayout: "fixed" }}>
                    <thead>
                    <tr>
                        <th style={{ width: "2rem" }}></th>
                        <th style={{ width: "3rem" }}>No.</th>
                        <th style={{ width: "9rem" }}>Date</th>
                        <th>Mission</th>
                        <th style={{ width: "7rem" }}>Rocket</th>
                        <th>Customers</th>
                    </tr>
                    </thead>
                    <tbody>
                    {tableBody}
                    </tbody>
                </table>
            </Table>
        </Appear>
    </article>;
}

export default History;